<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        a{
            text-decoration: none;
        }
        #header{
            height: 33px;
            border-bottom: 1px solid #ebebeb;
        }
        #header .header_left{
            width: 270px;
            height: 33px;
            float: left;
            line-height: 33px;
            font-size: 14px;
        }
        #header  a{
            color: #555;
        }
        #header .header_left img{
            margin-bottom: -5px;
        }
        #header .header_left .line{
            margin: 0 10px;
        }

        #header .header_right{
            width: 590px;
            height: 33px;
            line-height: 33px;
            float: right;
            text-align: right;
        }

        #header .header_right a{
            font-weight: bold;
            margin-left: 15px;
        }
        #header .header_right a:last-child{
            display: inline-block;
            background-color: #398bfb;
            width: 86px;
            height: 33px;
            color: white;
            font-size: 13px;
            text-align: center;
            vertical-align: top;/*把元素的顶端与行中最高的元素对齐*/
        }


        #center_search .logo{
            height: 112px;
            text-align: center;
        }
        #center_search .logo img{
            width: 270px;
            height: 112px;
        }

        #center_search{
            width: 641px;
            height: 189px;
            margin: 0 auto;

        }

        #center_search .search{
            height: 77px;
            padding-top: 10px;
        }

        #center_search .search_input{
            width: 536px;
            height: 40px;
            border: 1px solid #b8b8b8;
            float: left;
            padding-left: 10px;
        }
        #center_search .search_submit{
            width: 100px;
            height: 40px;
            background: #38f;
            border: 0;
            float: left;
            font-size: 16px;
            color: white;
        }

        #content{
            width: 893px;
            height: 640px;
            border: 1px solid #ebebeb;
            margin:  0 auto;
        }

        #content .content_header{
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #ebebeb;
        }

        #content  .content_header_left{
            float: left;
        }
        #content .content_header_left img{
            margin-bottom: -3px;
        }
        #content .content_header_left a{
            display: inline-block;
            height: 40px;
            font-size: 14px;
            color: #555555;
            padding: 0 10px;
            vertical-align: top;
        }
        #content .content_header_left a:hover{
            background-color: #ccc;
        }
        #content .content_header_right{
            float: right;
            padding-right: 10px;
            padding-top: 5px;
        }

        
        #content   .content_body_left{
            width: 575px;
            height: 600px;

            float: left;
        }
        #content .content_body_right{
            width: 315px;
            height: 600px;
            background: blue;
            float: right;
        }
        #content .content_cell{
            padding-top: 15px;

            padding-right: 10px;
        }
        #content .content_cell h3{
            margin-bottom: 10px;
        }
        #content .content_cell p{
            color: #555555;
            margin: 5px 0;
        }
        #content .content_body_left{
            padding-left: 10px;
        }
        #content .content_cell .bottom_line{
            border-bottom: 1px solid #ebebeb;
            margin: 10px 0;
        }
        #content .cell2_img{
            float: left;
        }
        #content .cell2_title{
            padding-left: 10px;
            padding-top: 20px;
            float: left;
        }
        #content .cell2_title h3{
            width: 350px;
            margin-bottom: 20px;
        }
        

    </style>
</head>
<body>
<!--头部-->
<div id="header">
    <!--头部的左侧-->
    <div class="header_left">
        <span><img src="images/weather.png" alt=""></span>
        <span class="line">|</span>
        <span><a href="#">换肤</a></span>
        <span><a href="#">消息</a></span>
    </div>
    <!--头部的右侧-->
    <div class="header_right">
        <a href="#">新闻</a>
        <a href="#">hao123</a>
        <a href="#">地图</a>
        <a href="#">学术</a>
        <a href="#">疯码教育</a>
        <a href="#">更多产品</a>
    </div>
</div>
<!--中部搜索-->
<div id="center_search">
    <!--logo-->
    <div class="logo">
        <img src="images/bd_logo.png" alt="">
    </div>
    <!--搜索区域-->
    <div class="search">
        <form action="">
            <input type="text" class="search_input">
            <input type="submit" class="search_submit" value="百度一下">
        </form>
    </div>
</div>

<!--主体内容-->
<div id="content">
    <div class="content_header">
            <div class="content_header_left">
                <a href="#"><img src="images/person_icon.png" alt=""></a>
                <a href="#">推荐</a>
                <a href="#">导航</a>
            </div>
            <div class="content_header_right">
                <a href="#"><img src="images/setting_icon.png" alt=""></a>
            </div>
    </div>

    <div class="content_body">
        <div class="content_body_left">

            <div class="content_cell">
                <h3>大满贯14冠!德约3-0完胜波特罗 美网三度封王</h3>
                <img src="images/cell_img1.png" alt="">
                <img src="images/cell_img2.png" alt="">
                <img src="images/cell_img3.png" alt="">
                <p>网易新闻 20-10 10:30</p>
                <p class="bottom_line"></p>
            </div>

            <div class="content_cell2">
                <div class="cell2_img">
                    <img src="images/cell_img1.png" alt="">
                </div>
                <div class="cell2_title">
                    <h3>大满贯14冠!德约3-0完胜波特罗 美网三度封王</h3>
                    <p>网易新闻 20-10 10:30</p>
                </div>
            </div>



        </div>
        <div class="content_body_right"></div>
    </div>
</div>



</body>
</html>